import React, { PureComponent } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Radio, Row, Col, Badge, Button } from 'antd';
import CustomCard from './Components/CustomCard'
import PieChart from './Components/PieChart'
import BarChart from './Components/BarChart'
import styles from './index.less';
import { learnTime ,countLearnTime,countLearnTimeWithHour,hasProgressFunc} from '@/utils/utils'
import { studentAnalyze } from '@/services/studentAnalyze'
const timeList = [
    { name: '特种设备安全管理', time: 30 },
    { name: '工业锅炉司炉', time: 28 },
    { name: '电站锅炉司炉', time: 32 },
    { name: '锅炉水处理', time: 32 },
    { name: '快开门式压力容器', time: 24 },
    { name: '移动式压力容器充装', time: 24 },
    { name: '氧舱维护保养', time: 24 },
    { name: '气瓶充装', time: 24 },
    { name: '电梯修理', time: 32 },
    { name: '起重机械指挥', time: 24 },
    { name: '起重机司机', time: 24 },
    { name: '客运索道修理', time: 28 },
    { name: '客运索道司机', time: 24 },
    { name: '大型游乐设施修理', time: 28 },
    { name: '大型游乐设施操作', time: 24 },
    { name: '叉车司机', time: 24 },
    { name: '观光车和观光列车司机', time: 24 },
    { name: '安全阀校验', time: 32 },
    { name: '金属焊工操作', time: 32 },
    { name: '非金属焊接操作', time: 32 }
]

class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            subjectData: [],
            subjectsData: [],
            subject: '',
            data: {
                correct: 0,
                courseware_num: 0,
                did_total: 0,
                done_num: 0,
                done_nums: 0,
                exercise_num: 0,
                learn: 0,
                learn_num: 0,
                practice_num: 0,
                question_num: 0,
                right_num: 0,
                zx: [{ type: "专项练习", value: 0 },
                { type: "模拟考试", value: 0 },
                { type: "课件学习", value: 0 },
                { type: "综合学习时长", value: 0 }]
            },
            zx: [{ type: "专项练习", value: 0 },
            { type: "模拟考试", value: 0 },
            { type: "课件学习", value: 0 },
            { type: "综合学习时长", value: 0 }],
            showButton: false
        }
    }
    getInfo = (subject, subjects) => {
        const uid = localStorage.getItem('id');
        studentAnalyze({ uid, subject }).then(res => {
            const list = [];
            if (!res || !res.zx) return;
            for (let i = 0; i < res.zx.length - 1; i++) {
                res.zx[i].value = Number((res.zx[i].value / 60).toFixed(2))
                list.push(res.zx[i])
            }
            const data = (res.zx[3].value / 60).toFixed(2);
            let tempTime = null;
            for (let i = 0; i < timeList.length; i++) {
                const item = timeList[i];
                if (item.name.indexOf(subjects) !== -1) {
                    tempTime = item.time;
                }
            }
            this.setState({
                data: res,
                zx: list,
                showButton: tempTime <= data ? true : false
            })
        })
    }
    componentDidMount() {
        const userinfo = JSON.parse(localStorage.getItem('userinfo') || '{}');
        const subject = userinfo.subject.split(',');
        const subjects = userinfo.subjects.split('-');
        this.setState({
            subjectData: subject,
            subjectsData: subjects,
            subject: subject[0],
            subjects: subjects[0]
        })
        this.getInfo(subject[0], subjects[0])
    }
    changeSubject = (e: any) => {
        this.setState({
            subject: e.target.value,
            subjects: e.target['data-label']
        })
        this.getInfo(e.target.value, e.target['data-label'])
    }
    printHandle = () => {
        this.props.history.push('/learnAnalyze/print')
        const { subjects, data } = this.state;
        sessionStorage.setItem('subjects', subjects)
        sessionStorage.setItem('duration', data.zx[3] ? data.zx[3].value : 0)
    }
    render() {
        const { subject, subjectData, subjectsData, data, zx } = this.state;
        // const done_nums = data.done_nums === 0 ? 0 : data.exercise_num / data.done_nums * 100;
        const learn_time = countLearnTime(data.zx[3].value)
        return (
            <PageContainer>
                <Card>
                    <Radio.Group buttonStyle="solid" value={subject} onChange={this.changeSubject}>
                        {
                            subjectData.map((item, index) => {
                                return <Radio.Button data-label={subjectsData[index]} value={item} key={item}>{subjectsData[index]}</Radio.Button>
                            })
                        }
                    </Radio.Group>
                    <h4 className={styles['analyze-title']}>学习统计分析</h4>
                    <div className={styles['card-group']}>
                        <div className={styles['card-item']} >
                            <CustomCard title={'专项练习'} color="blue" frequency={data.exercise_num} num={data.done_num + '%'} subTitle={'完成率'} />
                        </div>
                        <div className={styles['card-item']} >
                            <CustomCard title={'模拟考试'} color="orange" frequency={data.practice_num} num={data.correct + '%'} subTitle={'正确率'} />
                        </div>
                        <div className={styles['card-item']} >
                            <CustomCard title={'课件学习'} color="purple" frequency={data.learn_num} num={data.courseware_num} subTitle={'课件数'} />
                        </div>
                    </div>
                    <Row gutter={10}>
                        <Col span={10}>
                            <h4 className={styles['analyze-title']}>专项练习分析</h4>
                            <Card bordered style={{ backgroundColor: "#F5F5F5", borderColor: "#ccc" }}>
                                <BarChart title={'练习总数'} num={data.question_num + '道'} precent={data.question_num === 0 ? 0 : 100} />
                                <BarChart title={'实际作答'} num={data.done_nums + '道'} precent={data.question_num === 0 ? 0 : (data.done_nums / data.question_num * 100)} />
                                <BarChart title={'完成率'} num={data.done_num + '%'} precent={data.done_num} />
                                <BarChart title={'正确率'} num={data.right_num + '%'} precent={data.right_num} />
                            </Card>
                            <h4 className={styles['analyze-title']}>模拟考试分析</h4>
                            <Card bordered style={{ backgroundColor: "#F5F5F5", borderColor: "#ccc" }}>
                                <BarChart title={'模拟次数'} num={data.practice_num + '次'} precent={data.practice_num === 0 ? 0 : 100} />
                                <BarChart title={'完成率'} num={data.did_total + '%'} precent={data.did_total} />
                                <BarChart title={'正确率'} num={data.correct + '%'} precent={data.correct} />
                            </Card>
                        </Col>
                        <Col span={8}>
                            <h4 className={styles['analyze-title']}>学习时长统计</h4>
                            <Card bordered style={{ width: '100%', height: 445, backgroundColor: "#F5F5F5", borderColor: "#ccc" }}>
                                <PieChart data={zx} />
                                {
                                    data.zx[0] && <div className={styles['pie-legend']}>
                                        <div className={styles['pie-legend-item']}>
                                            <p className={styles['legend-title']}><Badge color="orange" />专项练习</p>
                                            <p className={styles['legend-content']}><b style={{ color: 'green' }}>{countLearnTimeWithHour(data.zx[0].value)}</b>学时</p>
                                        </div>
                                        <div className={styles['pie-legend-item']}>
                                            <p className={styles['legend-title']}><Badge color="blue" />模拟考试</p>
                                            <p className={styles['legend-content']}><b style={{ color: 'green' }}>{countLearnTimeWithHour(data.zx[1].value)}</b>学时</p>
                                        </div>
                                        <div className={styles['pie-legend-item']}>
                                            <p className={styles['legend-title']}><Badge color="green" />课件学习</p>
                                            <p className={styles['legend-content']}><b style={{ color: 'green' }}>{countLearnTimeWithHour(data.zx[2].value)}</b>学时</p>
                                        </div>
                                        <div className={styles['pie-legend-item']}>
                                            <p className={styles['legend-title']}><Badge color="pink" />综合学习时长</p>
                                            <p className={styles['legend-content']}><b style={{ color: "#eb2f96" }}>{countLearnTimeWithHour(data.zx[3].value / 60)}</b>学时</p>
                                        </div>
                                    </div>
                                }

                            </Card>

                        </Col>
                    </Row>
                    {/* <p style={{ color: "#1890ff", fontWeight: 'bold', fontSize: 16, marginTop: 25 }}>
                        您的线上学习时长已达到{data.zx[0] && (data.zx[3].value / 60).toFixed(2)}小时，符合培训人员课时标准，可以点击右侧打印学习证明
                         <Button onClick={this.printHandle} type="primary" style={{ marginLeft: 20 }}>证明打印</Button>
                    </p> */}
                    {
                        hasProgressFunc()&&(learn_time >= learnTime()) && <p style={{ color: "red", fontWeight: 'bold', fontSize: 16, marginTop: 25 }}>
                            您的线上培训学习时长已达到{learnTime()}学时，可以进行考试取证
                    </p>
                    }


                </Card>
            </PageContainer>
        );
    }
}

export default Index;
